<template>
  <div>
    <van-nav-bar
      title="国联大厦"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="$router.go(-1)"
    />

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in seeding" :key="index">
        <img :src="url + item" alt="" style="height: 200px; width: 100%" />
      </van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>

    <div class="ditie">
      <p class="pp">12</p>
      <div class="hezi">进地铁</div>
    </div>

    <div class="gezi"></div>

    <div class="zujin">
      <div class="fangxing">
        <div class="ji">
          <span class="yvefen1">21</span><span class="yvefen">/月</span>
        </div>
        <p class="mianji">租金</p>
      </div>
      <div class="fangxing">
        <p class="ji">一室</p>
        <p class="mianji">租金</p>
      </div>
      <div class="fangxing">
        <p class="ji">1平米</p>
        <p class="mianji">面积</p>
      </div>
    </div>
    <div class="gezi"></div>
    <!-- 类型区域 -->
    <div class="type">
      <div class="type-top">
        <p class="type-topp">
          <span class="type-a">装修：</span><span>精装</span>
        </p>
        <p class="type-toppp">
          <span class="type-a">朝向：</span><span>东</span>
        </p>
      </div>
      <div class="type-foot">
        <p class="type-footp">
          <span class="type-a">楼层：</span><span>高楼层</span>
        </p>
        <p class="type-footpp">
          <span class="type-a">类型：</span><span>普通住宅</span>
        </p>
      </div>
    </div>
    <!-- 空白 -->
    <div class="kong"></div>
    <div class="shibo" style="display: flex">
      <p class="kong_top_left">小区：</p>
      <p class="kong_top_rt">天山星城</p>
    </div>
    <div class="map_map"><img src="" alt="" /></div>

    <div class="shibo" style="display: flex">
      <p class="kong_top_left" style="font-weight: 700">房屋配套</p>
    </div>

    <div class="kong_buttom"></div>

    <van-grid>
      <van-grid-item class="zhaofangzi">
        <van-icon
          name="xiyiji"
          class="iconfont icon_top wuzi"
          class-prefix="icon"
          size="30"
          color="#494949"
        />
        <p>洗衣机</p>
      </van-grid-item>
      <van-grid-item class="zhaofangzi">
        <van-icon
          name="kongdiao"
          class="iconfont icon_top wuzi"
          class-prefix="icon"
          size="30"
          color="#494949"
        />
        <p>空调</p>
      </van-grid-item>
      <van-grid-item class="zhaofangzi">
        <van-icon
          name="bingxiang1"
          class="iconfont icon_top wuzi"
          class-prefix="icon"
          size="30"
          color="#494949"
        />
        <p>冰箱</p>
      </van-grid-item>

      <van-grid-item class="zhaofangzi">
        <van-icon
          name="yigui-hui"
          class="iconfont icon_top wuzi"
          class-prefix="icon"
          size="30"
          color="#494949"
        />
        <p>衣柜</p>
      </van-grid-item>

      <van-grid-item class="zhaofangzi">
        <van-icon
          name="reshuiqi"
          class="iconfont icon_top wuzi"
          class-prefix="icon"
          size="30"
          color="#494949"
        />
        <p>热水器</p>
      </van-grid-item>

      <van-grid-item class="zhaofangzi">
        <van-icon
          name="dianshi"
          class="iconfont icon_top wuzi"
          class-prefix="icon"
          size="30"
          color="#494949"
        />
        <p>电视</p>
      </van-grid-item>
    </van-grid>
    <div class="kongkong"></div>
    <div class="shibo" style="display: flex; margin-top: 8px">
      <p class="kong_top_left" style="font-weight: 700">房源概况</p>
    </div>

    <div class="kong_buttom"></div>
    <div>
      <div class="renzheng">
        <div class="img_top"><img src="@/assets/avatar.png" alt="" /></div>
        <div class="img_body">
          <p>王女士</p>
          <div class="renzheng_body">
            <van-icon
              name="renzheng"
              class="iconfont icon_top wuzi"
              class-prefix="icon"
              size="20"
              color="#fa5843"
            />
            <p>已认证房主</p>
          </div>
        </div>
        <div class="xinxi">发信息</div>
      </div>
      <p style="padding: 0 10px">
        1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
        2.小区规模大配套全年，幼儿园，体育场，游泳馆，养老院，小学。
        3.人车分流，环境优美。
        4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
      </p>
    </div>

  <div class="kongkong" style="   margin-top: 12px;"></div>
    <div class="shibo" style="display: flex">
      <p class="kong_top_left" style="font-weight: 700">猜你喜欢</p>
    </div>
    <div class="kong_buttom"></div>

   <ul>
      <li class="lie">
        <div class="tu">
          <img
           src="@/assets/1.png"
            alt=""
            style="width: 106px; height: 80px; margin-top: '5px'"
          />
        </div>
        <div class="bianli">
          <h4>安贞西里 3室1厅</h4>
          <p><span>72.32m^/南 北/低层楼</span></p>
          <div class="hezi">随时看房</div>
          <div class="ab">
            <span class="aaa">4500</span><span class="bbb">元/月</span>
          </div>
        </div>
      </li>
    </ul>
    <ul>
      <li class="lie">
        <div class="tu">
          <img
            src="@/assets/2.png"
            alt=""
            style="width: 106px; height: 80px; margin-top: '5px'"
          />
        </div>
        <div class="bianli">
          <h4>安贞西里 3室1厅</h4>
          <p><span>72.32m^/南 北/低层楼</span></p>
          <div class="hezi">随时看房</div>
          <div class="ab">
            <span class="aaa">4500</span><span class="bbb">元/月</span>
          </div>
        </div>
      </li>
    </ul>
    <ul>
      <li class="lie">
        <div class="tu">
          <img
               src="@/assets/3.png"
            alt=""
            style="width: 106px; height: 80px; margin-top: '5px'"
          />
        </div>
        <div class="bianli">
          <h4>安贞西里 3室1厅</h4>
          <p><span>72.32m^/南 北/低层楼</span></p>
          <div class="hezi">随时看房</div>
          <div class="ab">
            <span class="aaa">4500</span><span class="bbb">元/月</span>
          </div>
        </div>
      </li>
    </ul>

     <van-button type="default" class="button_left">取消</van-button>
     <van-button type="default" class="button_left">取消</van-button>
        <van-button type="primary" class="button_rt">确定</van-button>
    <div style="height: 200px"></div>
  </div>
</template>

<script>
import { seeding } from '@/api/jest'
export default {
  name: 'xiangqing',
  data () {
    return {
      url: 'http://liufusong.top:8080',
      seeding: ''
    }
  },
  async created () {
    const { body } = await seeding('5cc4494549926d0e2b94c816')
    console.log(body)
    this.seeding = body.houseImg
  }
}
</script>

<style scoped lang="less">
.button_left {
  background-color: #fff;
  width: 40%;
  color: #21b97a;
}
/deep/ .button_rt {
  width: 33%;
  background-color: #21b97a;
  border: 1px solid #ccc;
}
ul {
  border-bottom: 1px solid #ccc;
  .aaaa {
    margin-left: 5%;
    height: 1px;
    width: 90%;
    background-color: #ccc;
  }
  .lie {
    height: 115px;
    .tu {
      margin-left: 14px;
      margin-top: 17px;
    }
    .bianli {
      margin-left: 10px;
      margin-top: 10px;
      .ab {
        margin-top: 3px;
        .aaa {
          display: inline-block;
          font-size: 16px;
          color: #fa604b;
        }
        .bbb {
          margin-left: 5px;
          color: #fa604b;
        }
      }
      p {
        span {
          color: #b3b6b7;
        }
      }
      .hezi {
        height: 25px;
        width: 90px;
        background-color: #e1f5f8;
        border-radius: 5px;
        line-height: 25px;
        margin-top: 2px;
        text-align: center;
        color: #75d1dc;
      }
    }
  }
}
.aa {
  margin-top: 10px;
}
.lie {
  display: flex;
  // justify-content: space-between;
  height: 110px;
  // border: 1px solid red;
}
.bb {
  width: 100%;
  height: 1px;
  background-color: #ccc;
}
.renzheng {
  display: flex;
  padding: 18px 20px 22px 10px;

  .renzheng_body {
    display: flex;
    margin-top: 6px;
    p {
      font-size: 14px;
      font-size: #fa5843;
      width: 100px;
      margin-left: 5px;
    }
  }
  .img_top {
    img {
      width: 60px;
      height: 60px;
    }
  }
  .img_body {
    margin-left: 12px;
    p {
      font-size: 16px;
    }
  }
  .xinxi {
    width: 80px;
    height: 30px;
    border-radius: 5px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #21b97a;
    margin-left: 60px;
    margin-top: 12px;
    color: #21b97a;
  }
}
.bar {
  position: fixed;
}
.kongkong {
  height: 12px;
  background-color: #f6f5f6;
}
.kong_buttom {
  margin-left: 20px;
  height: 1px;
  width: 340px;
  background-color: #ccc;
}
.map_map {
  width: 100%;
  height: 200px;
  background-color: pink;
}
.kong_top_left {
  line-height: 40px;
  height: 40px;
  margin-left: 15px;
  color: #1b1b1f;
  font-size: 14px;
}
.kong_top_rt {
  line-height: 40px;
  height: 40px;
  font-size: 14px;
}
.shibo {
  height: 40px;
  width: 100%;
  background-color: #fff;
}
.kong {
  height: 15px;
  background-color: #f6f5f6;
}
.type {
  height: 70px;
  background-color: #fff;
  padding: 12px;
  .type-a {
    color: #9b9b9b;
  }
  .type-top {
    display: flex;
    margin-top: 8px;
    .type-toppp {
      margin-left: 100px;
    }
  }
  .type-foot {
    margin-top: 8px;
    display: flex;
    // .type-footp {}
    .type-footpp {
      margin-left: 85px;
    }
  }
}

.pp {
  padding-top: 16px;
}
.ditie {
  height: 90px;
  padding-left: 14px;
  // background-color: pink;
}
.hezi {
  height: 25px;
  width: 60px;
  background-color: #e1f5f8;
  border-radius: 5px;
  line-height: 25px;
  margin-top: 12px;
  text-align: center;
  color: #75d1dc;
}
.gezi {
  margin-left: 12px;
  width: 92%;
  height: 1px;
  background-color: #ccc;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  height: 240px;
}
.zujin {
  display: flex;
  justify-content: space-around;
  height: 80px;

  background-color: #fff;
  .fangxing {
    margin-top: 16px;
    .yvefen {
      display: inline-block;
      font-size: 14px;
    }
    .yvefen1 {
      // display: inline-block;
      font-size: 18px;
    }
    //     display: flex;
    //     flex-direction: column;
  }
  .mianji {
    margin-top: 5px;
    margin-left: 5px;
    color: #999999;
  }
  .ji {
    color: #fa5741;
    font-size: 18px;
    font-weight: 700;
  }
  .kong_top {
    line-height: 40px;
    width: 80px;
    height: 40px;
    background-color: pink;
  }
}
</style>
